<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>Introduction | MuiPlayer</title>
    <meta name="generator" content="VuePress 1.8.2">
    <link rel="icon" href="/favicon.ico">
    <link rel="manifest" href="/manifest.json">
    <link rel="stylesheet" href="/css/mui-player.min.css">
    <link rel="stylesheet" href="/css/swiper.min.css">
    <link rel="stylesheet" href="/css/CommentCoreLibrary.min.css">
    <link rel="apple-touch-icon" href="https://muiplayer.oss-cn-shanghai.aliyuncs.com/static/image/logo_solid.png">
    <script src="https://www.googletagmanager.com/gtag/js?id=G-X4RSEE27EY"></script>
    <script>
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());

            gtag('config', 'G-X4RSEE27EY');
        </script>
    <script src="/plugin/flv.min.js"></script>
    <script src="/plugin/hls.min.js"></script>
    <script src="/js/mui-player.min.js"></script>
    <script src="/js/CommentCoreLibrary.min.js"></script>
    <script src="/js/swiper.min.js"></script>
    <script src="/js/axios.min.js"></script>
    <meta name="description" content="Mui Player is an excellent HTML5 web page video player framework, providing fullscreen play, fast forward play, video danmaku, decoding and other most commonly used video play functions">
    <meta name="charset" content="utf-8">
    <meta name="baidu-site-verification" content="code-AdGRxnQ9NZ">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <meta property="og:site_name" content="MuiPlayer">
    <meta property="og:type" content="article">
    <meta property="og:image" content="https://muiplayer.oss-cn-shanghai.aliyuncs.com/static/image/mobile_preview.png">
    <meta name="theme-color" content="#FFFFFF">
    <meta property="og:title" content="">
    <meta property="og:description" content="Mui Player is an excellent HTML5 web page video player framework, providing fullscreen play, fast forward play, video danmaku, decoding and other most commonly used video play functions">
    <meta property="og:url" content="https://muiplayer.js.org/">
    <meta property="og:locale" content="en-US">
    <meta property="twitter:title" content="">
    <meta property="twitter:description" content="Mui Player is an excellent HTML5 web page video player framework, providing fullscreen play, fast forward play, video danmaku, decoding and other most commonly used video play functions">
    <meta name="keywords" content="HTML5 video, player, hls, danmaku, adaptive-bitrate, muiplayer">
    
    <link rel="preload" href="/assets/css/0.styles.ae6ed136.css" as="style"><link rel="preload" href="/assets/js/app.3641bd26.js" as="script"><link rel="preload" href="/assets/js/23.35f66f6c.js" as="script"><link rel="preload" href="/assets/js/3.67a24b41.js" as="script"><link rel="preload" href="/assets/js/30.ff8d825c.js" as="script"><link rel="preload" href="/assets/js/15.78fdfcaf.js" as="script"><link rel="prefetch" href="/assets/js/1.54927c41.js"><link rel="prefetch" href="/assets/js/10.dd4adaf8.js"><link rel="prefetch" href="/assets/js/11.ea997365.js"><link rel="prefetch" href="/assets/js/12.01af38a6.js"><link rel="prefetch" href="/assets/js/13.75800705.js"><link rel="prefetch" href="/assets/js/14.9fc60c4c.js"><link rel="prefetch" href="/assets/js/16.0101612c.js"><link rel="prefetch" href="/assets/js/17.a9b41ba5.js"><link rel="prefetch" href="/assets/js/18.a55912b8.js"><link rel="prefetch" href="/assets/js/19.13ce6fb6.js"><link rel="prefetch" href="/assets/js/20.57cf3163.js"><link rel="prefetch" href="/assets/js/21.a9f966ac.js"><link rel="prefetch" href="/assets/js/22.65e9060e.js"><link rel="prefetch" href="/assets/js/24.3adbb4ca.js"><link rel="prefetch" href="/assets/js/25.00421a1d.js"><link rel="prefetch" href="/assets/js/26.ba6e1ac8.js"><link rel="prefetch" href="/assets/js/27.4e1b228b.js"><link rel="prefetch" href="/assets/js/28.2d7617cb.js"><link rel="prefetch" href="/assets/js/29.ff74fd8e.js"><link rel="prefetch" href="/assets/js/31.daa6ba5b.js"><link rel="prefetch" href="/assets/js/32.9eac0031.js"><link rel="prefetch" href="/assets/js/33.32a2153a.js"><link rel="prefetch" href="/assets/js/34.da24de19.js"><link rel="prefetch" href="/assets/js/35.c97bfd00.js"><link rel="prefetch" href="/assets/js/36.3fd6a073.js"><link rel="prefetch" href="/assets/js/37.262c376a.js"><link rel="prefetch" href="/assets/js/38.2bd8c4ba.js"><link rel="prefetch" href="/assets/js/39.618c3695.js"><link rel="prefetch" href="/assets/js/4.9edd66f8.js"><link rel="prefetch" href="/assets/js/40.0502620b.js"><link rel="prefetch" href="/assets/js/41.9a3bd9b3.js"><link rel="prefetch" href="/assets/js/42.8ac30a45.js"><link rel="prefetch" href="/assets/js/43.e3fc5609.js"><link rel="prefetch" href="/assets/js/44.9acf05da.js"><link rel="prefetch" href="/assets/js/45.8c740c98.js"><link rel="prefetch" href="/assets/js/46.250aba22.js"><link rel="prefetch" href="/assets/js/47.83ee64f1.js"><link rel="prefetch" href="/assets/js/48.8d559ee8.js"><link rel="prefetch" href="/assets/js/49.6eeaca4b.js"><link rel="prefetch" href="/assets/js/5.35f74ec6.js"><link rel="prefetch" href="/assets/js/50.6e5e287b.js"><link rel="prefetch" href="/assets/js/51.ff3ae70a.js"><link rel="prefetch" href="/assets/js/52.378b3b20.js"><link rel="prefetch" href="/assets/js/53.868673eb.js"><link rel="prefetch" href="/assets/js/54.3c62a57a.js"><link rel="prefetch" href="/assets/js/55.035ed35d.js"><link rel="prefetch" href="/assets/js/56.08925c33.js"><link rel="prefetch" href="/assets/js/57.5d073ed4.js"><link rel="prefetch" href="/assets/js/58.dce950e6.js"><link rel="prefetch" href="/assets/js/59.092c0de9.js"><link rel="prefetch" href="/assets/js/6.30b43e5d.js"><link rel="prefetch" href="/assets/js/60.8526ebe1.js"><link rel="prefetch" href="/assets/js/61.c02d2349.js"><link rel="prefetch" href="/assets/js/62.b93eeaf2.js"><link rel="prefetch" href="/assets/js/63.b363131d.js"><link rel="prefetch" href="/assets/js/64.0cda51e1.js"><link rel="prefetch" href="/assets/js/65.d26b33ae.js"><link rel="prefetch" href="/assets/js/66.d07350b7.js"><link rel="prefetch" href="/assets/js/67.85653372.js"><link rel="prefetch" href="/assets/js/7.7232d571.js"><link rel="prefetch" href="/assets/js/8.772a3a10.js"><link rel="prefetch" href="/assets/js/9.5f308baf.js">
    <link rel="stylesheet" href="/assets/css/0.styles.ae6ed136.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/" class="home-link router-link-active"><!----> <span class="site-name">MuiPlayer</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/guide/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  Guide
</a></div><div class="nav-item"><a href="/demo/" class="nav-link">
  Demo
</a></div><div class="nav-item"><a href="/joinUs/" class="nav-link">
  Download
</a></div><div class="nav-item"><a href="https://gitee.com/muiplayer/hello-muiplayer" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Select language" class="dropdown-title"><span class="title">Languages</span> <span class="arrow down"></span></button> <button type="button" aria-label="Select language" class="mobile-dropdown-title"><span class="title">Languages</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/guide/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  English
</a></li><li class="dropdown-item"><!----> <a href="/zh/guide/" class="nav-link">
  简体中文
</a></li></ul></div></div> <a href="https://github.com/muiplayer/hello-muiplayer" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/guide/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  Guide
</a></div><div class="nav-item"><a href="/demo/" class="nav-link">
  Demo
</a></div><div class="nav-item"><a href="/joinUs/" class="nav-link">
  Download
</a></div><div class="nav-item"><a href="https://gitee.com/muiplayer/hello-muiplayer" target="_blank" rel="noopener noreferrer" class="nav-link external">
  Gitee
  <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><div class="dropdown-wrapper"><button type="button" aria-label="Select language" class="dropdown-title"><span class="title">Languages</span> <span class="arrow down"></span></button> <button type="button" aria-label="Select language" class="mobile-dropdown-title"><span class="title">Languages</span> <span class="arrow right"></span></button> <ul class="nav-dropdown" style="display:none;"><li class="dropdown-item"><!----> <a href="/guide/" aria-current="page" class="nav-link router-link-exact-active router-link-active">
  English
</a></li><li class="dropdown-item"><!----> <a href="/zh/guide/" class="nav-link">
  简体中文
</a></li></ul></div></div> <a href="https://github.com/muiplayer/hello-muiplayer" target="_blank" rel="noopener noreferrer" class="repo-link">
    GitHub
    <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></nav>  <ul class="sidebar-links"><li><section class="sidebar-group depth-0"><p class="sidebar-heading open"><span>Guide</span> <!----></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/guide/" aria-current="page" class="active sidebar-link">Introduction</a></li><li><a href="/guide/begin.html" class="sidebar-link">Quick start</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/begin.html#installation" class="sidebar-link">installation</a></li><li class="sidebar-sub-header"><a href="/guide/begin.html#usage" class="sidebar-link">usage</a></li></ul></li><li><a href="/guide/api.html" class="sidebar-link">API</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/api.html#main-configuration" class="sidebar-link">Main configuration</a></li><li class="sidebar-sub-header"><a href="/guide/api.html#custom-configuration" class="sidebar-link">Custom configuration</a></li><li class="sidebar-sub-header"><a href="/guide/api.html#play-event-monitoring" class="sidebar-link">Play event monitoring</a></li><li class="sidebar-sub-header"><a href="/guide/api.html#player-interface" class="sidebar-link">Player interface</a></li></ul></li><li><a href="/guide/mui-player-desktop-plugin.html" class="sidebar-link">PC extension</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/mui-player-desktop-plugin.html#installation" class="sidebar-link">installation</a></li><li class="sidebar-sub-header"><a href="/guide/mui-player-desktop-plugin.html#start-using" class="sidebar-link">start using</a></li><li class="sidebar-sub-header"><a href="/guide/mui-player-desktop-plugin.html#configuration-options" class="sidebar-link">Configuration options</a></li><li class="sidebar-sub-header"><a href="/guide/mui-player-desktop-plugin.html#custom-settings-group-configuration" class="sidebar-link">Custom settings group configuration</a></li><li class="sidebar-sub-header"><a href="/guide/mui-player-desktop-plugin.html#customize-the-right-click-menu" class="sidebar-link">Customize the right click menu</a></li><li class="sidebar-sub-header"><a href="/guide/mui-player-desktop-plugin.html#action-event-monitoring" class="sidebar-link">Action event monitoring</a></li></ul></li><li><a href="/guide/plus-desktop-plugin.html" class="sidebar-link">Pc extend【Professional edition】</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/plus-desktop-plugin.html#download" class="sidebar-link">download</a></li><li class="sidebar-sub-header"><a href="/guide/plus-desktop-plugin.html#start-using" class="sidebar-link">start using</a></li><li class="sidebar-sub-header"><a href="/guide/plus-desktop-plugin.html#configuration-options-plus" class="sidebar-link">Configuration options plus</a></li><li class="sidebar-sub-header"><a href="/guide/plus-desktop-plugin.html#interface-plus" class="sidebar-link">Interface plus</a></li></ul></li><li><a href="/guide/plus-mobile-plugin.html" class="sidebar-link">Mobile extend【Professional edition】</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/plus-mobile-plugin.html#scan-qr-code" class="sidebar-link">Scan QR code</a></li><li class="sidebar-sub-header"><a href="/guide/plus-mobile-plugin.html#download" class="sidebar-link">download</a></li><li class="sidebar-sub-header"><a href="/guide/plus-mobile-plugin.html#start-using" class="sidebar-link">start using</a></li><li class="sidebar-sub-header"><a href="/guide/plus-mobile-plugin.html#configuration-options" class="sidebar-link">Configuration options</a></li><li class="sidebar-sub-header"><a href="/guide/plus-mobile-plugin.html#action-event-monitoring" class="sidebar-link">Action event monitoring</a></li></ul></li><li><a href="/guide/preset.html" class="sidebar-link">MediaSource support</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/preset.html#use-hls-js-or-flv-js" class="sidebar-link">Use hls.js or flv.js</a></li><li class="sidebar-sub-header"><a href="/guide/preset.html#configuration" class="sidebar-link">Configuration</a></li><li class="sidebar-sub-header"><a href="/guide/preset.html#custom-use-mse-library" class="sidebar-link">Custom use MSE library</a></li></ul></li><li><a href="/guide/thumbnails.html" class="sidebar-link">Video thumbnail</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/guide/barrage.html" class="sidebar-link">Video danmaku</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/barrage.html#use-commentcorelibrary" class="sidebar-link">Use CommentCoreLibrary</a></li></ul></li><li><a href="/guide/subtitle.html" class="sidebar-link">Video subtitles</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/guide/custom-control.html" class="sidebar-link">Custom player controls</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/guide/custom-control.html#configuration-options" class="sidebar-link">Configuration options</a></li><li class="sidebar-sub-header"><a href="/guide/custom-control.html#example-1-customize-the-player-header-button" class="sidebar-link">Example 1: Customize the player header button</a></li><li class="sidebar-sub-header"><a href="/guide/custom-control.html#example-2-customize-the-buttons-at-the-bottom-of-the-player" class="sidebar-link">Example 2: Customize the buttons at the bottom of the player</a></li><li class="sidebar-sub-header"><a href="/guide/custom-control.html#example-3-customize-the-pop-up-window-on-the-right-sidebar" class="sidebar-link">Example 3: Customize the pop-up window on the right sidebar</a></li></ul></li><li><a href="/guide/uni-app.html" class="sidebar-link">Use in uni-app</a><ul class="sidebar-sub-headers"></ul></li><li><a href="/guide/other-problem.html" class="sidebar-link">other problems</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="introduction"><a href="#introduction" class="header-anchor">#</a> Introduction</h1> <hr> <p>MuiPlayer is an HTML5 video playback plug-in, which is configured with exquisite and operable playback controls by default, involving common playback scenarios, such as full-screen playback, playback fast forward, loop playback, volume adjustment, video decoding and other functions.</p> <!----> <p>The design of the player is compatible with running on PC and Mobile, and it provides two types of extension plug-ins, &quot;mobile&quot; and &quot;PC&quot;, so you can also use this plug-in in the Webview of Android and Ios.</p> <p>If your application is running on <a href="http://www.html5plus.org/doc/zh_cn/runtime.html" target="_blank" rel="noopener noreferrer">html5 plus<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a>In the environment, if you use the playback plug-in, you will get more native API support by default, such as playback control device volume, horizontal and vertical screen playback in full screen, immersive playback, etc. You can also use the native way to interact with web pages to control video and device functions. MuiPlayer provides callback functions triggered by all events. You need to make some control yourself here.</p> <h1 id="features"><a href="#features" class="header-anchor">#</a> Features</h1> <p>MuiPlayer helped us solve some common problems in daily H5 Video application development:</p> <ol><li>The ui of different browser platforms cannot be unified</li> <li>Conflicts between ui extensions and state processing are prone to</li> <li>In different environments (android, ios, pc), h5 video api may trigger events at different times</li> <li>There are various compatibility issues with media formats, muiplayer handles most of the compatibility issues when playing in different environments</li> <li>Repeated stepping on some pits in the process of developing h5 video, we provide a complete solution, so that developers can avoid some detours</li></ol></div> <footer class="page-edit"><div class="edit-link"><a href="https://github.com/muiplayer/hello-muiplayer/edit/master/docs/docs/guide/README.md" target="_blank" rel="noopener noreferrer">Help us improve this page!</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <div class="last-updated"><span class="prefix">Last Updated:</span> <span class="time">1/23/2023, 1:09:21 AM</span></div></footer> <div class="page-nav"><p class="inner"><!----> <span class="next"><a href="/guide/begin.html">
        Quick start
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----><!----></div></div>
    <script src="/assets/js/app.3641bd26.js" defer></script><script src="/assets/js/23.35f66f6c.js" defer></script><script src="/assets/js/3.67a24b41.js" defer></script><script src="/assets/js/30.ff8d825c.js" defer></script><script src="/assets/js/15.78fdfcaf.js" defer></script>
  </body>
</html>
